<template>
    <div>
        <div style="position: relative">

            <keep-alive >
                <router-view/>
            </keep-alive>
            <Loading v-show="loadingShow"></Loading>
        </div>
        <mt-tabbar v-model="selected" @click.native="tabChange" class="footer_tab">
            <mt-tab-item id="activity">
                <img slot="icon" :src="imgSrc.activity?imgSrc1:imgSrc6">
                党建活动
            </mt-tab-item>
            <mt-tab-item id="information">
                <img slot="icon" :src="imgSrc.information?imgSrc2:imgSrc7">
                党建资讯
            </mt-tab-item>
            <mt-tab-item id="study">
                <img slot="icon" :src="imgSrc.study?imgSrc3:imgSrc8">
                党建学习
            </mt-tab-item>
            <mt-tab-item id="notice">
                <img slot="icon" :src="imgSrc.notice?imgSrc4:imgSrc9">
                通知公告
            </mt-tab-item>
            <!--<mt-tab-item id="personage">-->
            <!--<img slot="icon" :src="imgSrc.personage?imgSrc5:imgSrc10">-->
            <!--个人中心-->
            <!--</mt-tab-item>-->
        </mt-tabbar>
    </div>
</template>

<script>
    import Loading from '@/components/loading'
    import {mapState} from 'vuex'

    export default {
        name: 'Main',
        components: {Loading},
        data() {
            return {
                selected: "activity",
                imgSrc: {activity: false, information: false, study: false, notice: false, personage: false},
                imgSrc1: require('../assets/img/footer_icon/u153.png'),
                imgSrc2: require('../assets/img/footer_icon/u156.png'),
                imgSrc3: require('../assets/img/footer_icon/u159.png'),
                imgSrc4: require('../assets/img/footer_icon/u162.png'),
                imgSrc5: require('../assets/img/footer_icon/u165.png'),
                imgSrc6: require('../assets/img/footer_icon/u169.png'),
                imgSrc7: require('../assets/img/footer_icon/u172.png'),
                imgSrc8: require('../assets/img/footer_icon/u175.png'),
                imgSrc9: require('../assets/img/footer_icon/u178.png'),
                imgSrc10: require('../assets/img/footer_icon/u181.png'),
                // loadingShow:false,
            }
        },
        mounted() {
            // console.log(this.$store.state.loadingShow,2222)
            // this.loadingShow = this.$store.state.loadingShow;
            // console.log(this.loadingShow, this.$store.state.loadingShow)
            this.imgSrc = {activity: false, information: false, study: false, notice: false, personage: false};
            this.selected = this.$route.query.pageType;
            this.imgSrc[this.selected] = true;


        },
        methods: {
            tabChange() {
                // 切换icon
                this.imgSrc = {activity: false, information: false, study: false, notice: false, personage: false};
                let i = this.selected;
                this.imgSrc[i] = true;

                //切换路由
                this.$router.push({
                    name: this.selected,
                    query: {
                        pageType: this.selected
                    }
                })

            }
        },
        computed: {
            ...mapState({
                loadingShow: state => state.loadingShow
            })

        }


    }
</script>

<style scoped lang="less">

    .footer_tab {
        height: 1.1rem;
        background: #fff;
        border-radius: 0.35rem 0.35rem 0 0;
        border: 1px solid rgba(241, 241, 241, 1);;
        .mint-tab-item.is-selected {
            color: #FF0033;
            background: transparent;
        }

    }

</style>

<style>
    .footer_tab .mint-tab-item-label {
        color: rgb(188, 188, 188);
        font-size: 0.24rem;

    }

    .footer_tab .is-selected .mint-tab-item-label {
        color: #FF0033
    }

</style>